<template>
<div :class="$style.container">
   <tab>
      <tab-item :selected="index===0" @on-item-click="onItemClick">全部</tab-item>
      <tab-item :selected="index===1" @on-item-click="onItemClick">未支付</tab-item>
      <tab-item :selected="index===2" @on-item-click="onItemClick">已支付</tab-item>
    </tab>
    <List :lists="lists"/>
    <div>
      <loading :show="showLoading" text="加载中..."></loading>
      <alert v-model="showAlert" title="提示" :content="tip"></alert>
    </div>
</div>
</template>

<script>
import { Tab, TabItem, Loading, Alert } from 'vux'
import List from './components/list'
import http from '../../APIService/http'
export default {
  data () {
    return {
      showLoading: false,
      showAlert: false,
      tip: '',
      allLIists: [],
      lists: [],
      index: 0
    }
  },
  components: {
    Tab,
    TabItem,
    Loading,
    Alert,
    List
  },
  mounted () {
    this.index = +this.$route.query.index || 0
    this.init()
  },
  methods: {
    async init () {
      try {
        if (!this.$Cookie.getToken()) {
          this.$router.push({
            path: '/login'
          })
          return false
        }
        this.showLoading = true
        let res = await http.get(`/order/getMyOrder`)
        if (res.code === 0) {
          this.showLoading = false
          this.allLIists = res.data
          this.getLists(this.index)
        } else if (res.code === -1) {
          this.showLoading = false
          this.tip = res.msg
          this.showAlert = true
        } else {
          throw new Error('error')
        }
      } catch (err) {
        console.log('get order fail:', err)
        this.showLoading = false
      }
    },
    onItemClick (index) {
      this.index = index
      this.getLists(index)
    },
    getLists (index) {
      let arr = []
      if (index === 1) {
        arr = this.allLIists.filter(item => item.status === 0)
      } else if (index === 2) {
        arr = this.allLIists.filter(item => item.status === 1)
      } else if (index === 0) {
        arr = this.allLIists
      }
      this.lists = [...arr]
    }
  }
}
</script>

<style lang='less' module>
.container {

}

</style>